import { InlineFilter } from '@/components/InlineFilter';

## Force New Password Fields

The following example customizes the Force New Password screen by:

- Re-using the default Force New Password form fields
- Appending a custom "Zone Info" text field

<InlineFilter filters={['angular']}>
_app.component.ts_

```ts{14-22} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-up-with-attributes/sign-up-with-attributes.component.ts

```

_app.component.html_

```html{1-14} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-up-with-attributes/sign-up-with-attributes.component.html

```
</InlineFilter>
<InlineFilter filters={['react']}>
```tsx{7-9,24} file=../../../../../../../examples/next/pages/ui/components/authenticator/sign-up-with-attributes/index.page.tsx#L13-

```
</InlineFilter>
<InlineFilter filters={['vue']}>
```html file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/sign-up-with-attributes/index.vue

```
</InlineFilter>
<InlineFilter filters={['svelte']}>
```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/sign-up-with-attributes/+page.svelte

```
</InlineFilter>
